
//ele 要实现此功能DOM对象 callback加载更多的方法
export function loadMore(element: any, callback: any) {
    function _loadMore() {
        let clientHeight = element.clientHeight;
        let scrollTop = element.scrollTop;
        let scrollHeight = element.scrollHeight;
        // 屏幕高度加上卷曲高度在加10大于 文档内容高度就加载、、
        // 以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。
        // 当scrollTop和clientHeight的值之和大于等于scrollHeight时，触发callback。
        console.log(clientHeight, scrollTop, scrollHeight, 'clientHeight,scrollTop,scrollHeight')
        if (clientHeight + scrollTop + 10 >= scrollHeight) {
            callback();
        }
    }
    element && element.addEventListener("scroll", debounce(_loadMore, 300));
}


export function downRefresh(element: HTMLDivElement, callback: Function) {
    let startY: number; //变量，存储接下时候的纵坐标
    let distance: number;////本次下拉的距离
    let originalTop = element.offsetTop;//最初此元素距离顶部的距离 top=50

    let startTop: number;
    let $timer: any = null;

    console.log(originalTop, 'originalTop原始位置');

    element.addEventListener("touchstart", function (event: TouchEvent) {
        if ($timer) clearInterval($timer);
        let touchMove = throttle(_touchMove, 30);
        //只有当此元素处于原始位置才能下拉，如果处于回弹的过程则不能拉了.并且此元素向上卷去的高度==0

        if (element.scrollTop === 0) {
            startTop = element.offsetTop;
            console.log(startTop, 'scrollTop=》startTop多少距离=》')
            startY = event.touches[0].pageY; //记录当前点击的纵坐标
            console.log('初始位置：', event.touches[0].pageY);
            element.addEventListener("touchmove", touchMove);
            element.addEventListener("touchend", touchEnd);
        }
        function _touchMove(event: TouchEvent) {
            let pageY = event.touches[0].pageY; //拿到最新的纵坐标
            console.log(pageY, 'pageY=》_touchMove拿到最新的纵坐标');
            if (pageY > startY) {
                distance = pageY - startY;
                element.style.top = startTop + distance + "px";
                console.log(startTop, '开始是多少', distance, 'distance下拉近距离', element.style.top, 'element.style.top');
            } else {
                element.removeEventListener("touchmove", touchMove);
                element.removeEventListener("touchend", touchEnd);
            }
        }


        function touchEnd(_event: TouchEvent) {
            element.removeEventListener("touchmove", touchMove);
            element.removeEventListener("touchend", touchEnd);
            // 边界条件。
            if (distance > 30) {
                callback();
            }
            // 回弹到顶部然后可以写transition也可以。。
                console.log( element.offsetTop, 'touchEnd里边的=》currentTop=>element.offsetTop', originalTop, 'originalTop原理来的值');
            const rebound=() => {
                let currentTop = element.offsetTop;
                // console.log(currentTop, 'touchEnd里边的=》currentTop', originalTop, 'originalTop原理来的值');
                if (currentTop - originalTop > 1) {
                    // 不断的回到顶部，定时器不断不断的上移。。。
                    element.style.top = currentTop - 1 + "px";
                } else {
                    element.style.top = originalTop + "px";
                    if ($timer) clearInterval($timer);
                }
                window.requestAnimFrame(rebound);
            }
            // 定时器执行
            // $timer = setInterval(rebound, 13) //13。。16是1000/60 是16.，我想占用13ms意思,给其他留点时间执行、、、

            window.requestAnimFrame(rebound);
        }
    })
}

export function debounce(fn: any, wait: number) {
    var timeout: any = null;
    return function () {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    };
}
export function throttle(func: any, delay: number) {
    var prev = Date.now();
    return function () {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    };
}

export const storage = {
    set(key: string, val: string) {
        sessionStorage.setItem(key, val);
    },
    get(key: string) {
        return sessionStorage.getItem(key)
    }
}

export function getNumber(num:string){
    // ¥200.00元
    return num&&parseFloat(num.slice(1,-1));
}

//requestAnimFrame 封装，可以兼容所有浏览器
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();


// transition 实现
// https://www.cnblogs.com/fps2tao/p/9153909.html

// (function(window) {
//     var _element = document.getElementById('refreshContainer'),
//       _refreshText = document.querySelector('.refreshText'),
//       _startPos = 0,
//       _transitionHeight = 0;

//     _element.addEventListener('touchstart', function(e) {
//         console.log('初始位置：', e.touches[0].pageY);
//         _startPos = e.touches[0].pageY;
//         _element.style.position = 'relative';
//         _element.style.transition = 'transform 0s';
//     }, false);

//     _element.addEventListener('touchmove', function(e) {
//         console.log('当前位置：', e.touches[0].pageY);
//         _transitionHeight = e.touches[0].pageY - _startPos;

//         if (_transitionHeight > 0 && _transitionHeight < 60) {
//             _refreshText.innerText = '下拉刷新';
//             _element.style.transform = 'translateY('+_transitionHeight+'px)';

//             if (_transitionHeight > 55) {
//               _refreshText.innerText = '释放更新';
//             }
//         }                
//     }, false);

//     _element.addEventListener('touchend', function(e) {
//         _element.style.transition = 'transform 0.5s ease 1s';
//         _element.style.transform = 'translateY(0px)';
//         _refreshText.innerText = '更新中...';

//         // todo...

//     }, false);
// })(window);

// todo 回弹requestanmifrom 优化
//  轮播下拉  
//  4/3  九宫格
//  算法
//  具体点击vue .react 对应分页
// 